﻿<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <title>Squidex theme</title>

        <meta content="width=device-width, initial-scale=1" name="viewport" />

        <meta content="IE=edge" http-equiv="X-UA-Compatible" />

        <style>
            .page-title h1 {
                font-size: 40px;
            }

            .bs-section-title {
                font-size: 30px;
                font-weight: lighter;
                margin-bottom: 2rem;
            }

            .bs-section {
                padding-top: 2rem;
                padding-bottom: 2rem;
            }

            .bs-section-white {
                background: white;
            }

            .bs-component {
                margin-bottom: 1rem;
            }

            .panel {
                min-height: 500px;
            }

            .card {
                margin-bottom: 1rem;
            }

            .modal-backdrop {
                height: 500px !important;
            }

            .table-items-row-details::before {
                right: 80px !important;
            }

            .form-bubble {
                display: block;
                max-height: 100px;
                min-height: 100px;
            }

            .sidebar {
                position: relative !important;
                height: 700px;
            }
        </style>
    </head>
    <body>
        <div class="bs-section container">
            <div class="row">
                <div class="col-lg-12 page-title">
                    <h1>Squidex Theme</h1>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Navbars</h1>
                    </div>
                </div>

                <div class="row bs-component">
                    <div class="col-lg-12">
                        <nav class="navbar navbar-expand navbar-dark bg-primary">
                            <div class="container-fluid">
                                <a class="navbar-brand" href="#">Navbar</a>
                                <ul class="navbar-nav me-auto">
                                    <li class="nav-item active">
                                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                    </li>

                                    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>

                                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>

                                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                                </ul>

                                <form class="d-flex">
                                    <input class="form-control me-2" placeholder="Search" />
                                    <button class="btn btn-secondary" type="button">Search</button>
                                </form>
                            </div>
                        </nav>
                    </div>
                </div>

                <div class="row bs-component">
                    <div class="col-lg-12">
                        <nav class="navbar navbar-expand navbar-light bg-light">
                            <div class="container-fluid">
                                <a class="navbar-brand" href="#">Navbar</a>
                                <ul class="navbar-nav me-auto">
                                    <li class="nav-item active">
                                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                    </li>

                                    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>

                                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>

                                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                                </ul>

                                <form class="d-flex">
                                    <input class="form-control me-2" placeholder="Search" />
                                    <button class="btn btn-secondary" type="button">Search</button>
                                </form>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Buttons</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-7">
                        <p class="bs-component">
                            <button class="btn btn-primary" type="button">Primary</button>
                            <button class="btn btn-secondary" type="button">Secondary</button>
                            <button class="btn btn-success" type="button">Success</button>
                            <button class="btn btn-info" type="button">Info</button>
                            <button class="btn btn-warning" type="button">Warning</button>
                            <button class="btn btn-danger" type="button">Danger</button> <a class="btn btn-link">Link</a>
                        </p>

                        <p class="bs-component">
                            <button class="btn btn-text-primary" type="button">Primary</button>
                            <button class="btn btn-text-secondary" type="button">Secondary</button>
                            <button class="btn btn-text-success" type="button">Success</button>
                            <button class="btn btn-text-info" type="button">Info</button>
                            <button class="btn btn-text-warning" type="button">Warning</button>
                            <button class="btn btn-text-danger" type="button">Danger</button>
                            <button class="btn btn-text-secondary2" type="button">Secondary2</button>
                        </p>

                        <p class="bs-component">
                            <button class="btn btn-primary disabled" type="button">Primary</button>
                            <button class="btn btn-secondary disabled" type="button">Secondary</button>
                            <button class="btn btn-success disabled" type="button">Success</button>
                            <button class="btn btn-info disabled" type="button">Info</button>
                            <button class="btn btn-warning disabled" type="button">Warning</button>
                            <button class="btn btn-danger disabled" type="button">Danger</button>
                        </p>

                        <p class="bs-component">
                            <button class="btn btn-outline-primary" type="button">Primary</button>
                            <button class="btn btn-outline-secondary" type="button">Secondary</button>
                            <button class="btn btn-outline-success" type="button">Success</button>
                            <button class="btn btn-outline-info" type="button">Info</button>
                            <button class="btn btn-outline-warning" type="button">Warning</button>
                            <button class="btn btn-outline-danger" type="button">Danger</button>
                        </p>

                        <div class="bs-component">
                            <div class="btn-group" role="group">
                                <button class="btn btn-primary" type="button">Primary</button>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-primary dropdown-toggle" type="button"></button>
                                </div>
                            </div>

                            <div class="btn-group" role="group">
                                <button class="btn btn-success" type="button">Success</button>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-success dropdown-toggle" type="button"></button>
                                </div>
                            </div>

                            <div class="btn-group" role="group">
                                <button class="btn btn-info" type="button">Info</button>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-info dropdown-toggle" type="button"></button>
                                </div>
                            </div>

                            <div class="btn-group" role="group">
                                <button class="btn btn-danger" type="button">Danger</button>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-danger dropdown-toggle" type="button"></button>
                                </div>
                            </div>
                        </div>

                        <div class="bs-component">
                            <button class="btn btn-google"><i class="icon-google icon-decent"></i> Google</button>
                            <button class="btn btn-twitter"><i class="icon-twitter icon-decent"></i> Twitter</button>
                            <button class="btn btn-microsoft"><i class="icon-microsoft icon-decent"></i> Microsoft</button>
                            <button class="btn btn-github"><i class="icon-github icon-decent"></i> Github</button>
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <p class="bs-component">
                            <button class="btn btn-primary btn-lg btn-block" type="button">Block level button</button>
                        </p>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-group" data-toggle="buttons">
                                <button class="btn btn-toggle btn-primary" type="button">Active</button>
                                <button class="btn btn-toggle" type="button">Inactive</button>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-group" data-toggle="buttons">
                                <button class="btn btn-toggle btn-warning" type="button">Active</button>
                                <button class="btn btn-toggle" type="button">Inactive</button>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-group" data-toggle="buttons">
                                <button class="btn btn-toggle btn-danger" type="button">Active</button>
                                <button class="btn btn-toggle" type="button">Inactive</button>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-group" data-toggle="buttons">
                                <button class="btn btn-toggle btn-success" type="button">Active</button>
                                <button class="btn btn-toggle" type="button">Inactive</button>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-group" data-toggle="buttons">
                                <button class="btn btn-toggle btn-info" type="button">Active</button>
                                <button class="btn btn-toggle" type="button">Inactive</button>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-primary active"> <input checked type="checkbox" /> Checkbox 1 </label>
                                <label class="btn btn-primary"> <input type="checkbox" /> Checkbox 2 </label>
                                <label class="btn btn-primary"> <input type="checkbox" /> Checkbox 3 </label>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-primary active"> <input checked name="options" type="radio" /> Radio 1 </label>
                                <label class="btn btn-primary"> <input name="options" type="radio" /> Radio 2 </label>
                                <label class="btn btn-primary"> <input name="options" type="radio" /> Radio 3 </label>
                            </div>
                        </div>

                        <div class="bs-component">
                            <div class="btn-group-vertical" data-toggle="buttons">
                                <button class="btn btn-primary" type="button">Top</button>
                                <button class="btn btn-primary" type="button">Middle</button>
                                <button class="btn btn-primary" type="button">Buttom</button>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-group" aria-label="Basic example" role="group">
                                <button class="btn btn-secondary" type="button">Left</button>
                                <button class="btn btn-secondary" type="button">Middle</button>
                                <button class="btn btn-secondary" type="button">Right</button>
                            </div>
                        </div>

                        <div class="bs-component" style="margin-bottom: 15px">
                            <div class="btn-toolbar" aria-label="Toolbar with button groups" role="toolbar">
                                <div class="btn-group" aria-label="First group" role="group">
                                    <button class="btn btn-secondary" type="button">1</button>
                                    <button class="btn btn-secondary" type="button">2</button>
                                    <button class="btn btn-secondary" type="button">3</button>
                                    <button class="btn btn-secondary" type="button">4</button>
                                </div>
                                &nbsp;
                                <div class="btn-group" aria-label="Second group" role="group">
                                    <button class="btn btn-secondary" type="button">5</button>
                                    <button class="btn btn-secondary" type="button">6</button>
                                    <button class="btn btn-secondary" type="button">7</button>
                                </div>
                                &nbsp;
                                <div class="btn-group" aria-label="Third group" role="group">
                                    <button class="btn btn-secondary" type="button">8</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Typography</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4">
                        <div class="bs-component">
                            <h1>Heading 1</h1>

                            <h2>Heading 2</h2>

                            <h3>Heading 3</h3>

                            <h4>Heading 4</h4>

                            <h5>Heading 5</h5>

                            <h6>Heading 6</h6>

                            <h3>Heading <small class="text-muted">with muted text</small></h3>

                            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="bs-component">
                            <h2>Example body text</h2>

                            <p>
                                Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient
                                montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
                            </p>

                            <p>The following is <strong>rendered as bold text</strong>.</p>

                            <p>The following is <em>rendered as italicized text</em>.</p>

                            <p>The following is an abbreviation <abbr title="attribute">attr</abbr>.</p>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="bs-component">
                            <h2>Emphasis classes</h2>

                            <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

                            <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>

                            <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

                            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

                            <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <h2>Blockquotes</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="bs-component">
                            <blockquote class="blockquote">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                            </blockquote>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="bs-component">
                            <blockquote class="blockquote blockquote-reverse">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">List Tables</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="bs-component">
                            <table class="table table-items">
                                <thead class="thead-inverse">
                                    <tr>
                                        <th><input class="form-check" checked type="checkbox" /></th>

                                        <th>Column heading</th>

                                        <th>Column heading</th>

                                        <th>Column heading</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr class="active">
                                        <td><input class="form-check" checked type="checkbox" /></td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="spacer"></tr>

                                    <tr>
                                        <td><input class="form-check" type="checkbox" /></td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="spacer"></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">List Tables (on white background)</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="bs-component">
                            <table class="table table-items">
                                <thead class="thead-inverse">
                                    <tr>
                                        <th><input class="form-check" checked type="checkbox" /></th>

                                        <th>Column heading</th>

                                        <th>Column heading</th>

                                        <th>Column heading</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr class="active">
                                        <td><input class="form-check" checked type="checkbox" /></td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="spacer"></tr>

                                    <tr>
                                        <td><input class="form-check" type="checkbox" /></td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="spacer"></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Forms</h1>
                    </div>
                </div>

                <form>
                    <fieldset>
                        <legend>Legend</legend>

                        <div class="form-alert form-alert-error">
                            <p>Validation error.</p>

                            <ul>
                                <li>An user with the same email aready exists.</li>
                            </ul>
                        </div>

                        <div class="form-bubble">
                            <div class="form-alert form-alert-error">
                                <p>Validation error.</p>

                                <ul>
                                    <li>An user with the same email aready exists.</li>
                                </ul>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="bs-component">
                                    <div class="form-group">
                                        <label>Email address</label>
                                        <input class="form-control" autocomplete="off" placeholder="Enter email" type="email" />
                                        <small class="text-muted form-text">We will never share your email with anyone else.</small>
                                    </div>

                                    <div class="form-group">
                                        <label>Password</label>
                                        <input class="form-control" autocomplete="false" placeholder="Password" type="password" />
                                    </div>

                                    <div class="form-group">
                                        <label>Example custom select</label>
                                        <select class="form-select">
                                            <option>1</option>

                                            <option>2</option>

                                            <option>3</option>

                                            <option>4</option>

                                            <option>5</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label>Example custom multiple select</label>
                                        <select class="form-select" multiple>
                                            <option>1</option>

                                            <option>2</option>

                                            <option>3</option>

                                            <option>4</option>

                                            <option>5</option>
                                        </select>
                                    </div>

                                    <div class="form-group"><label>Example textarea</label> <textarea class="form-control" rows="3"></textarea></div>

                                    <div class="form-group">
                                        <h2>Custom Radio buttons</h2>

                                        <div class="form-check">
                                            <input class="form-check-input" id="customRadio1" name="customRadio" type="radio" />
                                            <label class="form-check-label" for="customRadio1">Option 1</label>
                                        </div>

                                        <div class="form-check">
                                            <input class="form-check-input" id="customRadio2" name="customRadio" type="radio" />
                                            <label class="form-check-label" for="customRadio2">Option 2</label>
                                        </div>

                                        <div class="form-check">
                                            <input class="form-check-input" id="customRadio3" disabled name="customRadio" type="radio" />
                                            <label class="form-check-label" for="customRadio3">Option 3</label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <h2>Custom Checkboxes</h2>

                                        <div class="form-check">
                                            <input class="form-check-input" id="customRadio1" name="customRadio" type="checkbox" />
                                            <label class="form-check-label" for="customRadio1">Option 1</label>
                                        </div>

                                        <div class="form-check">
                                            <input class="form-check-input" id="customRadio2" name="customRadio" type="checkbox" />
                                            <label class="form-check-label" for="customRadio2">Option 2</label>
                                        </div>

                                        <div class="form-check">
                                            <input class="form-check-input" id="customRadio3" disabled name="customRadio" type="checkbox" />
                                            <label class="form-check-label" for="customRadio3">Option 3</label>
                                        </div>
                                    </div>
                                    <button class="btn btn-primary" type="submit">Submit</button>
                                </div>
                            </div>

                            <div class="col-lg-4 col-lg-offset-1">
                                <form class="bs-component">
                                    <div class="form-group">
                                        <label>Disabled input</label>
                                        <input class="form-control" disabled placeholder="Disabled input here..." />
                                    </div>

                                    <div class="form-group">
                                        <label>Readonly input</label>
                                        <input class="form-control" placeholder="Disabled input here..." readonly />
                                    </div>

                                    <div class="form-group has-success">
                                        <label>Input with success</label> <input class="form-control is-valid" />
                                        <div class="valid-feedback">Success! You've done it.</div>
                                    </div>

                                    <div class="form-group has-warning">
                                        <label>Input with warning</label> <input class="form-control is-invalid" />
                                        <div class="invalid-feedback">Shucks, try again.</div>
                                    </div>

                                    <div class="form-group has-warning">
                                        <label>Input with error</label>
                                        <div class="errors-container">
                                            <div class="errors">You have entered an invalid value.</div>
                                        </div>
                                        <input class="form-control is-invalid" />
                                    </div>

                                    <div class="form-group has-warning">
                                        <label>Input with hint</label> <input class="form-control" />
                                        <div class="alert alert-hint mt-2"><i class="icon-info-outline"></i> The app name cannot be changed later.</div>
                                    </div>

                                    <div class="form-group"><label>Large input</label> <input class="form-control form-control-lg" type="text" /></div>

                                    <div class="form-group"><label>Default input</label> <input class="form-control" /></div>

                                    <div class="form-group"><label>Small input</label> <input class="form-control form-control-sm" type="text" /></div>

                                    <div class="form-group">
                                        <label>Input addons</label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">$</span>
                                            <input class="form-control" aria-label="Amount (to the nearest dollar)" />
                                            <span class="input-group-text">.00</span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Input Buttons</label>
                                        <div class="input-group mb-3">
                                            <button class="btn btn-outline-secondary">Button</button>
                                            <input class="form-control" aria-label="Amount (to the nearest dollar)" />
                                            <button class="btn btn-outline-secondary">Button</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Navigation</h1>
                    </div>
                </div>

                <div class="row" style="margin-bottom: 2rem">
                    <div class="col-lg-6">
                        <h2>Tabs</h2>

                        <div class="bs-component">
                            <ul class="nav nav-tabs">
                                <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>

                                <li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li>

                                <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
                                </li>
                            </ul>
                        </div>

                        <div class="bs-component">
                            <ul class="nav nav-tabs2">
                                <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>

                                <li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li>

                                <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <h2>Pills</h2>

                        <div class="bs-component">
                            <ul class="nav nav-pills">
                                <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
                                </li>

                                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>

                                <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
                            </ul>
                        </div>
                        <br />
                        <div class="bs-component">
                            <ul class="nav flex-column">
                                <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown</a>
                                </li>

                                <li class="nav-item"><a class="nav-link" href="#">Link</a></li>

                                <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <h2>Breadcrumbs</h2>

                        <div class="bs-component">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item active">Home</li>
                            </ol>

                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>

                                <li class="breadcrumb-item active">Library</li>
                            </ol>

                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>

                                <li class="breadcrumb-item"><a href="#">Library</a></li>

                                <li class="breadcrumb-item done"><a href="#">Others</a></li>

                                <li class="breadcrumb-item active">Data</li>
                            </ol>

                            <ol class="breadcrumb steps">
                                <li class="breadcrumb-item"><a href="#">Home</a></li>

                                <li class="breadcrumb-item done"><a href="#">Library</a></li>

                                <li class="breadcrumb-item active">Others</li>

                                <li class="breadcrumb-item">Data</li>
                            </ol>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <h2>Pagination</h2>

                        <div class="bs-component">
                            <div>
                                <ul class="pagination">
                                    <li class="page-item disabled"><a class="page-link" href="#">&laquo;</a></li>

                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>

                                    <li class="page-item"><a class="page-link" href="#">2</a></li>

                                    <li class="page-item"><a class="page-link" href="#">3</a></li>

                                    <li class="page-item"><a class="page-link" href="#">4</a></li>

                                    <li class="page-item"><a class="page-link" href="#">5</a></li>

                                    <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
                                </ul>
                            </div>

                            <div>
                                <ul class="pagination pagination-lg">
                                    <li class="page-item disabled"><a class="page-link" href="#">&laquo;</a></li>

                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>

                                    <li class="page-item"><a class="page-link" href="#">2</a></li>

                                    <li class="page-item"><a class="page-link" href="#">3</a></li>

                                    <li class="page-item"><a class="page-link" href="#">4</a></li>

                                    <li class="page-item"><a class="page-link" href="#">5</a></li>

                                    <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
                                </ul>
                            </div>

                            <div>
                                <ul class="pagination pagination-sm">
                                    <li class="page-item disabled"><a class="page-link" href="#">&laquo;</a></li>

                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>

                                    <li class="page-item"><a class="page-link" href="#">2</a></li>

                                    <li class="page-item"><a class="page-link" href="#">3</a></li>

                                    <li class="page-item"><a class="page-link" href="#">4</a></li>

                                    <li class="page-item"><a class="page-link" href="#">5</a></li>

                                    <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <h2>Dropdown</h2>

                        <div class="bs-component">
                            <ul class="dropdown-menu" style="position: static; display: block">
                                <li><h6 class="dropdown-header">Dropdown header</h6></li>

                                <li><a class="dropdown-item" href="#">Action</a></li>

                                <li><a class="dropdown-item" href="#">Another action</a></li>

                                <li><a class="dropdown-item" href="#">Something else here</a></li>

                                <li><hr class="dropdown-divider" /></li>

                                <li><a class="dropdown-item dropdown-item-delete" href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <h2>Side Menu</h2>

                        <ul class="nav nav-light flex-column">
                            <li class="nav-item nav-heading">Security</li>

                            <li class="nav-item">
                                <a class="nav-link active"> <i class="icon-clients"></i> Clients </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link"> <i class="icon-contributors"></i> Contributors </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link"> <i class="icon-roles"></i> Roles </a>
                            </li>

                            <li class="nav-item nav-heading">Editing</li>

                            <li class="nav-item">
                                <a class="nav-link"> <i class="icon-patterns"></i> Patterns </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link"> <i class="icon-languages"></i> Languages </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link"> <i class="icon-workflows"></i> Workflows </a>
                            </li>

                            <li class="nav-item nav-heading">More</li>

                            <li class="nav-item">
                                <a class="nav-link"> <i class="icon-backups"></i> Backups </a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link"> <i class="icon-subscription"></i> Subscriptions </a>
                            </li>
                        </ul>
                    </div>

                    <div class="col-lg-6">
                        <h2>Sidedbar</h2>

                        <div class="sidebar">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link active">
                                        <i class="nav-icon icon-dashboard"></i>
                                        <div class="nav-text">Dashboard</div>
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="nav-icon icon-schemas"></i>
                                        <div class="nav-text">Schemas</div>
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="nav-icon icon-contents"></i>
                                        <div class="nav-text">Content</div>
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="nav-icon icon-assets"></i>
                                        <div class="nav-text">Assets</div>
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="nav-icon icon-rules"></i>
                                        <div class="nav-text">Rules</div>
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link">
                                        <i class="nav-icon icon-api"></i>
                                        <div class="nav-text">Api</div>
                                    </a>
                                </li>
                            </ul>

                            <ul class="nav flex-column bottom">
                                <li class="nav-item">
                                    <a class="nav-link" href="https://squidex.io/help" target="_blank">
                                        <i class="nav-icon icon-help2"></i>
                                    </a>
                                </li>

                                @if (!isSettingsHidden(app)) {
                                    <li class="nav-item">
                                        <a class="nav-link"> <i class="nav-icon icon-settings"></i> </a>
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Indicators</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <h2>Alerts</h2>

                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-warning mt-2">
                                <button class="btn-close" data-dismiss="alert" type="button"></button>
                                <h4>Warning!</h4>

                                <p>
                                    Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,
                                    <a class="alert-link" href="#">vel scelerisque nisl consectetur et</a>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-danger mt-2">
                                <button class="btn-close" data-dismiss="alert" type="button"></button> <strong>Oh snap!</strong>
                                <a class="alert-link" href="#">Change a few things up</a> and try submitting again.
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-success mt-2">
                                <button class="btn-close" data-dismiss="alert" type="button"></button> <strong>Well done!</strong> You successfully read
                                <a class="alert-link" href="#">this important alert message</a>.
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="bs-component">
                            <div class="alert alert-dismissible alert-info mt-2">
                                <button class="btn-close" data-dismiss="alert" type="button"></button> <i class="icon-info-outline"></i>
                                <strong>Heads up!</strong> This <a class="alert-link" href="#">alert needs your attention</a>, but it's not super important.
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <h2>Badges</h2>

                    <div class="bs-component" style="margin-bottom: 40px">
                        <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span>
                        <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span>
                        <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span>
                        <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span>
                    </div>

                    <div class="bs-component">
                        <span class="badge rounded-pill badge-primary">Primary</span>
                        <span class="badge rounded-pill badge-secondary">Secondary</span>
                        <span class="badge rounded-pill badge-success">Success</span>
                        <span class="badge rounded-pill badge-danger">Danger</span>
                        <span class="badge rounded-pill badge-warning">Warning</span>
                        <span class="badge rounded-pill badge-info">Info</span> <span class="badge rounded-pill badge-light">Light</span>
                        <span class="badge rounded-pill bg-dark">Dark</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Progress</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <h2>Basic</h2>

                        <div class="bs-component">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px"></div>
                            </div>
                        </div>

                        <h2>Contextual alternatives</h2>

                        <div class="bs-component">
                            <div class="progress mb-1">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%"></div>
                            </div>

                            <div class="progress mb-1">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 50%"></div>
                            </div>

                            <div class="progress mb-1">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%"></div>
                            </div>

                            <div class="progress mb-1">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 100%"></div>
                            </div>
                        </div>

                        <h2>Multiple bars</h2>

                        <div class="bs-component">
                            <div class="progress mb-1">
                                <div class="progress-bar" role="progressbar" style="width: 15%"></div>

                                <div class="progress-bar bg-success" role="progressbar" style="width: 30%"></div>

                                <div class="progress-bar bg-info" role="progressbar" style="width: 20%"></div>
                            </div>
                        </div>

                        <h2>Striped</h2>

                        <div class="bs-component">
                            <div class="progress mb-1">
                                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"></div>
                            </div>

                            <div class="progress mb-1">
                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"></div>
                            </div>

                            <div class="progress mb-1">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"></div>
                            </div>

                            <div class="progress mb-1">
                                <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"></div>
                            </div>

                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"></div>
                            </div>
                        </div>

                        <h2>Animated</h2>

                        <div class="bs-component">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Containers</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="bs-component">
                            <div class="jumbotron">
                                <h1 class="display-3">Jumbotron</h1>

                                <p>
                                    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or
                                    information.
                                </p>

                                <p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <h2>List groups</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4">
                        <div class="bs-component">
                            <ul class="list-group">
                                <li class="list-group-item"><span class="tag tag-default tag-pill float-xs-right">14</span> Cras justo odio</li>

                                <li class="list-group-item"><span class="tag tag-default tag-pill float-xs-right">2</span> Dapibus ac facilisis in</li>

                                <li class="list-group-item"><span class="tag tag-default tag-pill float-xs-right">1</span> Morbi leo risus</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="bs-component">
                            <div class="list-group">
                                <a class="list-group-item list-group-item-action active" href="#">Cras justo odio</a>
                                <a class="list-group-item list-group-item-action" href="#">Dapibus ac facilisis in</a>
                                <a class="list-group-item list-group-item-action disabled" href="#">Morbi leo risus</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="bs-component">
                            <div class="list-group">
                                <a class="list-group-item list-group-item-action active" href="#">
                                    <h4 class="list-group-item-heading">List group item heading</h4>

                                    <p class="list-group-item-text">
                                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                                    </p>
                                </a>
                                <a class="list-group-item list-group-item-action" href="#">
                                    <h4 class="list-group-item-heading">List group item heading</h4>

                                    <p class="list-group-item-text">
                                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                                    </p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Cards</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4">
                        <div class="bs-component">
                            <div class="card text-white bg-primary text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card text-white bg-success text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card text-white bg-info text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card text-white bg-warning text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card text-white bg-danger text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="bs-component">
                            <div class="card border-primary text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card border-success text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card border-info text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card border-warning text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="card border-danger text-xs-center">
                                <div class="card-body">
                                    <blockquote class="card-bodyquote">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

                                        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="bs-component">
                            <div class="card">
                                <h3 class="card-header">Card header</h3>

                                <div class="card-body">
                                    <h5 class="card-title">Special title treatment</h5>

                                    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
                                </div>
                                <img
                                    alt="Card image"
                                    src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                                    style="height: 200px; width: 100%; display: block" />
                                <div class="card-body">
                                    <p class="card-text" href="#">
                                        Some quick example text to build on the card title and make up the bulk of the card's content.
                                    </p>
                                    <a class="card-link" href="#">Card link</a> <a class="card-link" href="#">Another link</a>
                                </div>

                                <div class="card-footer text-muted text-xs-center">2 days ago</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Modals</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="bs-component">
                            <div class="modal" style="position: relative; width: 100%; height: 500px; display: block">
                                <div class="modal-backdrop show" style="position: absolute"></div>

                                <div class="modal-dialog modal-lg" style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px; display: block">
                                    <div class="modal-content">
                                        <div class="modal-header with-tabs">
                                            <h4 class="modal-title">Title</h4>
                                            <button class="btn-close" type="button"></button>
                                        </div>

                                        <div class="modal-header modal-tabs">
                                            <ul class="nav nav-tabs2">
                                                <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>

                                                <li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li>

                                                <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>

                                                <li class="nav-item dropdown">
                                                    <a
                                                        class="nav-link dropdown-toggle"
                                                        aria-expanded="false"
                                                        aria-haspopup="true"
                                                        data-toggle="dropdown"
                                                        href="#"
                                                        role="button"
                                                        >Dropdown</a
                                                    >
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="modal-body">Modal body text goes here.</div>

                                        <div class="modal-footer justify-content-between">
                                            <button class="float-left btn btn-text-secondary2" type="button">Close</button>
                                            <button class="float-right btn btn-primary" type="button">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="bs-component">
                            <div class="modal" style="position: relative; width: 100%; height: 500px; display: block">
                                <div class="modal-backdrop show" style="position: absolute"></div>

                                <div class="modal-dialog modal-lg" style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px; display: block">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">Title</h4>
                                            <button class="btn-close" type="button"></button>
                                        </div>

                                        <div class="modal-body">Modal body text goes here.</div>

                                        <div class="modal-footer justify-content-between">
                                            <button class="float-left btn btn-text-secondary2" type="button">Close</button>
                                            <button class="float-right btn btn-primary" type="button">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Lists</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="bs-component">
                            <div class="table-items-row table-items-row-expandable">
                                <div class="table-items-row-summary">
                                    <div class="row no-gutters">
                                        <div class="col">My Item 1</div>

                                        <div class="col col-auto">
                                            <button class="btn btn-outline-secondary btn-expand expanded mr-1" type="button">
                                                <i class="icon-settings"></i>
                                            </button>
                                            <button class="btn btn-text-danger btn-outline-secondary" type="button">
                                                <i class="icon-bin2"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="table-items-row-details">
                                    <div class="table-items-row-details-tabs">
                                        <ul class="nav nav-tabs2">
                                            <li class="nav-item"><a class="nav-link active">Tab1</a></li>

                                            <li class="nav-item"><a class="nav-link">Tab2</a></li>

                                            <li class="nav-item"><a class="nav-link">Tab3</a></li>
                                        </ul>

                                        <div class="text-end">
                                            <button class="btn btn-text-secondary2" type="reset">Cancel</button>
                                            <button class="btn btn-primary ms-1" type="submit">Save</button>
                                        </div>
                                    </div>

                                    <div class="table-items-row-details-tab">Text</div>
                                </div>
                            </div>

                            <div class="table-items-row table-items-row-expandable">
                                <div class="table-items-row-summary">
                                    <div class="row no-gutters">
                                        <div class="col">My Item 2</div>

                                        <div class="col col-auto">
                                            <button class="btn btn-outline-secondary btn-expand mr-1" type="button">
                                                <i class="icon-settings"></i>
                                            </button>
                                            <button class="btn btn-text-danger btn-outline-secondary" type="button">
                                                <i class="icon-bin2"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-items-row table-items-row-expandable">
                                <div class="table-items-row-summary">
                                    <div class="row no-gutters">
                                        <div class="col col-name">My Item 3</div>

                                        <div class="col col-auto">
                                            <button class="btn btn-outline-secondary btn-expand mr-1" type="button">
                                                <i class="icon-settings"></i>
                                            </button>
                                            <button class="btn btn-text-danger btn-outline-secondary" type="button">
                                                <i class="icon-bin2"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-items-row table-items-row-summary">
                                <div class="row no-gutters">
                                    <div class="col col-name">My Item 4</div>

                                    <div class="col col-auto">
                                        <button class="btn btn-outline-secondary mr-1" type="button">
                                            <i class="icon-settings"></i>
                                        </button>
                                        <button class="btn btn-text-danger btn-outline-secondary" type="button">
                                            <i class="icon-bin2"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bs-section bs-section-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="bs-section-title">Tables</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="bs-component">
                            <table class="table table-striped table-hover table-bordered">
                                <thead class="thead-inverse">
                                    <tr>
                                        <th>#</th>

                                        <th>Column heading</th>

                                        <th>Column heading</th>

                                        <th>Column heading</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td>1</td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr>
                                        <td>2</td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="table-info">
                                        <td>3</td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="table-success">
                                        <td>4</td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="table-danger">
                                        <td>5</td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="table-warning">
                                        <td>6</td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>

                                    <tr class="table-active">
                                        <td>7</td>

                                        <td>Column content</td>

                                        <td>Column content</td>

                                        <td>Column content</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
